<!DOCTYPE html>
<html>
<head>
	<title>产品详情</title>
	<link rel="stylesheet" type="text/css" href="gooddetail.css">
	<meta charset="utf-8">
	<script>
		function getGoodDetail(goodId) {
			var xmlhttp;
			if (goodId.length == 0) {
				return;
			}

			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}

			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4) {

					var ret = xmlhttp.responseText;
					// 成功回调
					ret = eval('(' + ret + ')');
					// alert(ret.goodsImg);
					document.getElementById("goodsName").innerHTML = ret.goodsName;
					document.getElementById("goodsPrice").innerHTML = "￥" + ret.goodsPrice + "/" + ret.goodsDw;


				}
			}
			xmlhttp.open("GET", "/phpdemo/messageboard/getgooddetail.php?id=" + goodId, true);
			xmlhttp.send();
		}

		getGoodDetail(45);
	</script> 
</head> 

<?php
	// 商品名字
	$goodsName = "";

	// 商品价格
	$goodsPrice = "";

	// 商品单位
	$goodsDw = "";

	// 该商品可得积分
	$integral = 0;

	// 包含服务
	$include = "";

	// 地址
	$address = "";

	// 图片
	$goodsImg = Array();

	$file_content = file_get_contents("https://app.playnet.cc/index/goods/detail/id/45/wjkey/wj_580c6e9c079e12.52173588");
	$file_content = json_decode($file_content);
	foreach ($file_content as $key => $value) {
		// echo "string" . $key . $value;
		if ($key == "data") {
			foreach ($value as $key => $value) {
				if ($key == "goodsName") {
					$goodsName = $value;
				}
				if ($key == "goodsPrice") {
					$goodsPrice = $value;
				}
				if ($key == "goodsDw") {
					$goodsDw = $value;
				}
				if ($key == "integral") {
					$integral = $value;
				}

				// 图片
				if ($key == "goodsImg") {
					foreach ($value as $key => $valueImg) {
						
						foreach ($valueImg as $key => $valuePicUrl) {
							// echo "string = " . $valuePicUrl;
							if ($key == "pic") {
								$goodsImg[] = $valuePicUrl;
							}
						}
					}
				}

				// 地址
				if ($key == "goodsService") {
					foreach ($value as $key => $valueService) {
						if ($key == "address") {
							$address = $valueService;
						}
					}
				}
			}
		}
	}

	// echo "string = " . $address;
	// echo "string = " . count($goodsImg) ;
	// return;
?>
<script type="text/javascript">
	var nowIndex = 1;
	var maxIndex = "<?php echo count($goodsImg);?>";

	function checkBanner(i) {
				
		if (typeof(i) != "undefined") { 
			nowIndex = i;
		} else {
			// alert(i);
			if (nowIndex == maxIndex) {
				nowIndex = 1;
			} else {
				nowIndex++;
			}
		}

		for (var index = 1; index <= maxIndex; index++) {
			document.getElementById("click" + index.toString()).style.background="gray";
			document.getElementById("showPic" + index.toString()).style.display="none";
		}

		document.getElementById("click" + nowIndex.toString()).style.background="blue";
		document.getElementById("showPic" + nowIndex.toString()).style.display="block";		
		// alert(nowIndex);

	}
	
	theTimer = setInterval("checkBanner()",2000);
		// alert(str);
</script>

<body>
<div>
	<!-- 轮播 -->
	<div class="banner">
		<?php 
			$htmlPic = "";
			foreach ($goodsImg as $key => $value) {

				$index = $key + 1;

				if ($key == 0) {
					$htmlPic = "<div class='pic" . $index . "' id='showPic" . $index . "' style='display: block'><img src='" . $value . "'></div>";
				} else {
					$htmlPic .= "<div class='pic" . $index . "' id='showPic" . $index . "' style=''><img src='" . $value . "'></div>";
				}
			}

			echo $htmlPic;
		 ?>
		 <!--
		<div class="pic1" id="showPic1" style="display: block"><img src="http://img02.tooopen.com/images/20141231/sy_78327074576.jpg"></div>
		<div class="pic2" id="showPic2" ><img src="http://img07.tooopen.com/images/20170209/tooopen_sy_198253465628.jpg"></div>
		<div class="pic3" id="showPic3" ><img src="http://img06.tooopen.com/images/20161101/tooopen_sy_184377491944.jpg"></div>
		<div class="pic4" id="showPic4" ><img src="http://img04.tooopen.com/images/20121109/tooopen_201211091418005900.jpg"></div>
		<div class="pic5" id="showPic5" ><img src="http://img04.tooopen.com/images/20121108/tooopen_201211081404152520.jpg"></div>	
		-->	
	</div>
	<div class="bannerMenu">
		<ul>
			<!--
			<?php 
				$htmlBanner = "";
				foreach ($goodsImg as $key => $value) {

				$index = $key + 1;

				if ($key == 0) {
					$htmlBanner = "<li><a href='#' id='click" . $index . "' onclick='checkBanner(" . $index . ")' style='background-color: blue'>" . $index . "</a></li>";
				} else {
					$htmlBanner .= "<li><a href='#' id='click" . $index . "' onclick='checkBanner(" . $index . ")' style=''>" . $index . "</a></li>";
				}
			}

			echo $htmlPic;
			?>
			-->
			<li><a href="#" id="click1" onclick="checkBanner(1)" style="background-color: blue">1</a></li>
			<li><a href="#" id="click2" onclick="checkBanner(2)">2</a></li>
			<li><a href="#" id="click3" onclick="checkBanner(3)">3</a></li>
			<li><a href="#" id="click4" onclick="checkBanner(4)">4</a></li>
			<li><a href="#" id="click5" onclick="checkBanner(5)">5</a></li>
			<li><a href="#" id="click6" onclick="checkBanner(6)">6</a></li>
			
		</ul>
	</div>

	<!-- 商品title -->
	<div class="goodinfo">
		<div class="goodinfotitle"><strong id="goodsName"></strong></div>
		<div class="goodinfomoney" id="goodsPrice"></div>
	</div>

	<div class="goodinfobottom"></div>

	<!-- 积分 -->
	<div class="total">
		<span class="totaltip">积分</span><span class="totaldesc"><?php echo "购买可得" . $integral . "积分"; ?></span>
	</div>
	<div class="totalline"></div>

	<!-- 服务 -->
	<div class="service">
		<div class="servicetitle">费用包含服务 <span>(注：灰色为自选)</span></div>
		<div class="serviceSubView">
			<div class="servicesubViewof">
				<div class="servicesubViewofImg"></div>
				<div class="serivcesubViewOfTxt">WiFi服务</div>
			</div>
			<div class="servicesubViewof">
				<div class="servicesubViewofImg"></div>
				<div class="serivcesubViewOfTxt">WiFi服务</div>
			</div>
			<div class="servicesubViewof">
				<div class="servicesubViewofImg"></div>
				<div class="serivcesubViewOfTxt">WiFi服务</div>
			</div>

		</div>
	</div>
	<div class="serviceline"></div>

	<!-- 地址 -->
	<div class="addr">
		<span><?php echo $address; ?></span><div class="addrSubView"></div>
	</div>
	<div class="addrline"></div>

	<!-- 评价 -->
	<div class="comment">
		<div class="commentTitle">客户评价</div>
		<div class="commentAllCount">全部评价：0人</div><div class="commentStar">综合评分：0.0</div>
		<div class="commentLine"></div>
		<div>
			<span>很尴尬</span><span>很尴尬很尴尬</span><span>很很尴尬尴尬</span><span>很尴尬</span><span>很尴尬</span><span>很尴尬</span>
			<span>很尴尬</span><span>很尴尬</span><span>很尴很尴尬很尴尬尬</span><span>很尴尬很尴尬尴尬</span><span>很尴尬</span><span>很尴尬</span>
		</div>
	</div>

</div>

</body>
</html>